window.addEventListener("load", function () {
	// 模拟后台数据
	let apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];
	// 动态渲染 api部分
	// 先遍历数组
	apiTypeData.forEach(function (v) {
		// &&当前面为真的时候就加上这个类名
		$("#APICate ul").innerHTML += `
        <li class="${v.isnew && "f-bold"}" title ="${v.keyword}">${v.name}</li>
            `;
	});

	// api部分
	$("#APICate ul li").forEach(function (v, i) {
		// console.log(v);
		// 默认的选中状态
		i === 0 && v.classList.add("on");
		v.addEventListener("mouseover", function () {
			this.style.cursor = "pointer";
		});
		// 点击事件
		v.addEventListener("click", function () {
			// 一刀切
			$("#APICate ul li").forEach(function (v) {
				v.classList.remove("on");
			});
			this.classList.add("on");
			$("#APICate .API-serch strong").textContent = v.textContent;
			$("#APICate .API-serch input").value = v.title;
		});
	});

	//API列表区域 模拟服务器返回的数据
	let listDataArr = [
		//第一行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南1111",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},

		//第二行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南222",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第三行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南3333",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南4444",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{
			img: "API_03.jpg",
			name: "天气预报",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];
	// 先遍历
	// listDataArr.forEach(function (v) {
	// 	$("#APIcontent .list").innerHTML += `
	//     <li class="dflex">
	// 					<img src="../imgs/${v.img}" alt="" />
	// 					<p>${v.name}</p>
	// 					<p class="${v.price === "免费" ? "f-green" : "f-red"}">${v.price}</p>
	// 					<a href="#">申请数据</a>
	//                     ${v.isSpecial ? `<span> 企业专用 </span>` : ""}
	// 				</li>
	//     `;
	// });

	// 分页
	let totalSize = listDataArr.length;
	let pageSize = 5; //每页的内容
	let pageNumber = totalSize / pageSize;
	for (let i = 1; i <= pageNumber; i++) {
		let li = this.document.createElement("li");
		li.textContent = i;
		i === 1 && li.classList.add("active");
		$("#APIcontent .sorter").append(li);
	}
	render(1, pageSize);
	$("#APIcontent .sorter").addEventListener("click", function (e) {
		// console.log(e.target.textContent, pageSize);
		// console.log("123", Number(e.target.textContent, pageSize));
		if (e.target.nodeName === "LI") {
			$("#APIcontent .sorter li").forEach(function (v) {
				v.classList.remove("active");
			});
			e.target.classList.add("active");
			render(Number(e.target.textContent), pageSize);
		}

		// let pagination = Number(e.target.textContent); //这个是点击时li的内容
		// let starInex = (pagination - 1) * pageSize; //开始索引
		// let endInex = pagination * pageSize; //结束索引
		// let resulit = listDataArr.slice(starInex, endInex); //截取子数组 就是对应的内容
		// // 排他思想 把最开始的内容清空
		// $("#APIcontent .list").innerHTML = "";
		// resulit.forEach(function (v) {
		// 	$("#APIcontent .list").innerHTML += `
		// <li class="dflex">
		// 				<img src="../imgs/${v.img}" alt="" />
		// 				<p>${v.name}</p>
		// 				<p class="${v.price === "免费" ? "f-green" : "f-red"}">${v.price}</p>
		// 				<a href="#">申请数据</a>
		//                 ${v.isSpecial ? `<span> 企业专用 </span>` : ""}
		// 			</li>
		// `;
		// });
	});

	$("#APIcontent .list").addEventListener("click", function (e) {
		if (e.target.nodeName === "A") {
			// alert("去登录");
			// 让蒙层显示
			$(".masck").style.display = "block";
		}
	});
	// 点击蒙层让蒙层影藏
	$(".masck").addEventListener("click", function () {
		$(".masck").style.display = "none";
	});
	function render(pagination, pageSize) {
		// let pagination = Number(e.target.textContent); //这个是点击时li的内容
		let starInex = (pagination - 1) * pageSize; //开始索引
		let endInex = pagination * pageSize; //结束索引
		let resulit = listDataArr.slice(starInex, endInex); //截取子数组 就是对应的内容
		// 排他思想 把最开始的内容清空
		$("#APIcontent .list").innerHTML = "";
		resulit.forEach(function (v) {
			$("#APIcontent .list").innerHTML += `
			<li class="dflex">
					<img src="../imgs/${v.img}" alt="" />
					<p>${v.name}</p>
					<p class="${v.price === "免费" ? "f-green" : "f-red"}">${v.price}</p>
					<a href="#">申请数据</a>
					${v.isSpecial ? `<span> 企业专用 </span>` : ""}
				</li>
	`;
		});
		console.log($("#APIcontent .list").innerHTML);
	}
});
